<!--多条件搜索-->
<form nz-form [formGroup]="formModel">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="merchantId">商户号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入商户号">
          <input type="text" id="merchantId" nz-input formControlName="merchantId" placeholder="请输入商户号"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="payCompanyCode">支付公司</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择状态">
          <nz-select formControlName="payCompanyCode" nzShowSearch nzAllowClear nzPlaceHolder="请选择状态">
            <nz-option *ngFor="let item of payCompanyCodeList" [nzLabel]="item.name" [nzValue]="item.code"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="cardNo">结算开始时间</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入开始时间">
          <app-my-date-picker [dateTimeType]="startDateTimeType" [nzAllowClear]="true" [date]="gmtPaymentStart"
                              (event)="gmtPaymentTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="cardNo">结算结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入结束时间">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [nzAllowClear]="true" [date]="gmtPaymentEnd"
                              (event)="gmtPaymentTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="payStatus">结算情况</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择结算情况">
          <nz-select formControlName="payStatus" nzShowSearch nzAllowClear nzPlaceHolder="请选择结算情况">
            <nz-option nzLabel="不限" nzValue="-1"></nz-option>
            <nz-option nzLabel="未打款" nzValue="0"></nz-option>
            <nz-option nzLabel="打款成功" nzValue="1"></nz-option>
            <nz-option nzLabel="打款失败" nzValue="2"></nz-option>
            <nz-option nzLabel="取消打款" nzValue="3"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择运营商">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}" nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="3">
      <div nz-col nzFlex="auto" class="search-area">
        <button nz-button nzType="primary" class="button_search" (click)="exportTheOrder()"><i nz-icon nzType="to-top"
                                                                                           nzTheme="outline"
        ></i>导出
        </button>
      </div>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="3">
      <div nz-col nzFlex="auto" class="search-area">
        <button nz-button nzType="primary" class="button_search" (click)="submitForm()"><i nz-icon nzType="search"
                                                                                           nzTheme="outline"
        ></i>搜索
        </button>
      </div>
    </div>
  </div>
</form>

<nz-spin [nzSpinning]="isSpinning">
  <div [ngClass]="isMobile?'wrap-mobile':'wrap'">

    <div style="white-space:nowrap;display: flex;justify-content: space-between">
      <div>
      </div>
    </div>


    <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
              [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
              (nzPageIndexChange)="nzPageIndexChange($event)"
              [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
              [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
      <thead>
      <tr>
        <th>打款日期</th>
        <th>商户号</th>
        <th>运营商</th>
        <th>营业金额</th>
        <th *ngIf="roleIdEnum.SUPER_ADMINISTRATOR == userInfo.roleId">平台统计结算金额</th>
        <th>实际结算金额</th>
        <th>支付手续费</th>
        <th>
          <div>节假日结算手续费</div>
          <div>（万分之二，2024年7月1号起才有数据）</div>
        </th>
        <th>支付公司</th>
        <th>结算卡号</th>
        <th>账号名</th>
        <th>打款状态</th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let data of nzTable.data">
        <tr>
          <td nzEllipsis>{{data.payDate}}</td>
          <td nzEllipsis>{{data.merchantId}}</td>
          <td nzEllipsis>
            <div>{{data.username}}</div>
            <div class="text-sm text-grey">{{data.operatorName}}</div>
          </td>
          <td nzEllipsis>{{data.realTotalAmount}}</td>
          <td nzEllipsis *ngIf="roleIdEnum.SUPER_ADMINISTRATOR == userInfo.roleId">{{data.statsAmt}}</td>
          <td nzEllipsis >{{data.stmtAmt}}</td>
          <td nzEllipsis>{{data.handlingCharge}}</td>
          <td nzEllipsis>{{data.settleFee}}</td>
          <td nzEllipsis>{{data.name}}</td>
          <td nzEllipsis>{{data.payeeAstAcctNo}}</td>
          <td nzEllipsis>{{data.payeeAstAcctName}}</td>
          <td nzEllipsis>
            <span *ngIf="data.payStatus == 0" class="text-blue">
          暂未更新到打款数据
        </span>
            <span *ngIf="data.payStatus == 1" class="text-olive ">
          打款成功
        </span>
            <span *ngIf="data.payStatus == 2" class="text-red" nz-tooltip [nzTooltipTitle]="contentTemplate"
                  nzMouseLeaveDelay="1">
          <span>打款失败</span>
          <i nz-icon nzType="exclamation-circle" nzTheme="fill"></i>
        </span>
            <span *ngIf="data.payStatus == 3" class="text-red">
          取消打款
        </span>
          </td>
          <ng-template #contentTemplate>
            <span *ngIf="data.payFailedReason == null">未知原因，请咨询管理员</span>
            <span *ngIf="data.payFailedReason != null">{{data.payFailedReason}}</span>
          </ng-template>
        </tr>
      </ng-container>
      </tbody>
    </nz-table>
  </div>
</nz-spin>

